---
title: Pagine
description: Un'introduzione alle pagine Astro
i18nReady: true
---

import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

Le **pagine** sono file che risiedono nella sottodirectory `src/pages/` del tuo progetto Astro. Sono responsabili della gestione del routing, del caricamento dei dati e del layout generale della pagina per ogni pagina del tuo sito web.

## File di pagina supportati

Astro supporta i seguenti tipi di file nella directory `src/pages/`:
- [`.astro`](#pagine-astro)
- [`.md`](#pagine-markdownmdx)
- `.mdx` (con [l'integrazione MDX installata](/it/guides/integrations-guide/mdx/#installation))
- [`.html`](#pagine-html)
- `.js`/`.ts` (come [endpoint](/it/guides/endpoints/))

## Routing basato su file

Astro sfrutta una strategia di routing chiamata **routing basato su file**. Ogni file nella tua directory `src/pages/` diventa un endpoint sul tuo sito in base al suo percorso file.

Un singolo file può anche generare più pagine utilizzando il [routing dinamico](/it/guides/routing/#percorsi-dinamici). Ciò ti consente di creare pagine anche se i tuoi contenuti si trovano al di fuori della speciale directory `/pages/`, come in una [raccolta di contenuti](/it/guides/content-collections/) o un [CMS](/it/guides/cms/).

<ReadMore>Ulteriori informazioni sul [routing in Astro](/it/guides/routing/).</ReadMore>

### Collegamento tra le pagine

Scrivi l´elemento standard HTML [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) nelle tue pagine Astro per collegarti ad altre pagine del tuo sito.

Ad esempio, per collegarsi a `https://example.com/authors/sonali/` da qualsiasi altra pagina su "example.com":

```astro title="src/pages/index.astro"
Ulteriori informazioni <a href="/authors/sonali/">su Sonali</a>.
```

## Pagine Astro

Le pagine Astro utilizzano l'estensione del file `.astro` e supportano le stesse funzionalità di [Componenti Astro](/it/basics/astro-components/).

```astro title="src/pages/index.astro"
---
---
<html lang="en">
  <head>
    <title>La mia pagina</title>
  </head>
  <body>
    <h1>Benvenuto sulla mia pagina!</h1>
  </body>
</html>
```

Una pagina deve produrre un documento HTML completo. Se non incluso esplicitamente, Astro aggiungerà la dichiarazione `<!DOCTYPE html>` necessaria e il contenuto `<head>` a qualsiasi componente `.astro` situato all'interno di `src/pages/` per impostazione predefinita. Puoi disattivare questo comportamento in base al componente contrassegnandolo come pagina [parziale](#parziali-della-pagina).

Per evitare di ripetere gli stessi elementi HTML su ogni pagina, puoi spostare gli elementi comuni `<head>` e `<body>` nei tuoi [componenti di layout](/it/basics/layouts/). Puoi utilizzare tutti i componenti di layout che desideri.

```astro {3} /</?MySiteLayout>/
---
// src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>Il contenuto della mia pagina, dentro ad un layout!</p>
</MySiteLayout>
```

<ReadMore>Leggi di più sui [componenti di layout](/it/basics/layouts/) in Astro.</ReadMore>

## Pagine Markdown/MDX

Astro tratta anche qualsiasi file Markdown (`.md`) all'interno di `src/pages/` come pagine del tuo sito web finale. Se hai [l´integrazione MDX installata](/it/guides/integrations-guide/mdx/#installation), tratta anche i file MDX (`.mdx`) allo stesso modo. Questi sono comunemente usati per pagine ricche di testo come post di blog e documentazione.

[Le raccolte di contenuti delle pagine Markdown o MDX](/it/guides/content-collections/) in `src/content/` possono essere utilizzate per [generare pagine dinamicamente](/it/guides/routing/#percorsi-dinamici).

I layout di pagina sono particolarmente utili per i [file Markdown](#pagine-markdownmdx). I file Markdown possono utilizzare la speciale proprietà frontmatter `layout` per specificare un [componente layout](/it/basics/layouts/) che avvolgerà il contenuto Markdown in un completo documento di pagina, `<html>...</html>`.

```md {3}
---
# Example: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
title: 'La mia pagina Markdown'
---
# Titolo

Questa è la mia pagina, scritta in **Markdown.**
```

<ReadMore>Ulteriori informazioni su [Markdown](/it/guides/markdown-content/) in Astro.</ReadMore>

## Pagine HTML

I file con estensione `.html` possono essere inseriti in `src/pages/` e utilizzati direttamente come pagine del tuo sito. Tieni presente che alcune funzionalità chiave di Astro non sono supportate nei [componenti HTML](/it/basics/astro-components/#componenti-html).

## Pagina di errore 404 personalizzata

Per una pagina di errore 404 personalizzata, puoi creare un file `404.astro` o `404.md` in `/src/pages`.

Questo creerà una pagina `404.html`. La maggior parte dei [fornitori di servizi di hosting](/it/guides/deploy/) la troveranno e la utilizzeranno.

## Parziali della pagina

<p><Since v="3.4.0" /></p>

:::caution
I parziali di pagina sono pensati per essere utilizzati insieme a una libreria front-end, come [htmx](https://htmx.org/) o [Unpoly](https://unpoly.com/). Puoi anche usarli se hai dimestichezza con la scrittura di JavaScript front-end di basso livello. Per questo motivo sono una funzionalità avanzata.

Inoltre, i parziali non dovrebbero essere utilizzati se il componente contiene stili o script specifici per la pagine, poiché questi elementi verranno rimossi dall'output HTML. Se hai bisogno di stili specifici per la pagina, è meglio utilizzare pagine regolari e non parziali insieme a una libreria frontend che sappia come unire i contenuti nell'intestazione.
:::

I parziali sono componenti di pagina situati all'interno di `src/pages/` che non sono destinati a essere visualizzati come pagine complete.

Come i componenti situati all'esterno di questa cartella, questi file non includono automaticamente la dichiarazione `<!DOCTYPE html>`, né alcun contenuto `<head>` come stili e script specifici per la pagina.

Tuttavia, poiché si trovano nella directory speciale `src/pages/`, l'HTML generato è disponibile in un URL corrispondente al percorso del file. Ciò consente a una libreria di rendering (ad esempio htmx, Stimulus, jQuery) di accedervi sul client e caricare sezioni di HTML dinamicamente su una pagina senza aggiornamento del browser o navigazione della pagina.

I parziali, se combinati con una libreria di rendering, forniscono un'alternativa alle [isole Astro](/it/concepts/islands/) e ai [tag`<script>`](/it/guides/client-side-scripts/) per la creazione di contenuto dinamico in Astro.

I file di pagina che possono esportare un valore (ad esempio `.astro`, `.mdx`) possono essere contrassegnati come parziali.

Configura un file all'interno della directory `src/pages/` come parziale aggiungendo la seguente esportazione:

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---

<li>Sono un parziale!</li>
```

`export const partial` deve essere identificabile staticamente. Può avere il valore di:

- Il valore booleano __`true`__.
- Una variabile di ambiente che utilizza import.meta.env come `import.meta.env.USE_PARTIALS`.

### Utilizzo con una libreria

 I partial vengono utilizzati per aggiornare dinamicamente una sezione di una pagina utilizzando una libreria come [htmx](https://htmx.org/).

 L'esempio seguente mostra un attributo `hx-post` impostato sull'URL di un parziale. Il contenuto della pagina parziale verrà utilizzato per aggiornare l'elemento HTML di destinazione su questa pagina.

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>La mia pagina</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">Destinazione qui</div>

  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      Cliccami!
  </button>
</section>
```

Il parziale `.astro` deve esistere nel percorso del file corrispondente e includere un'esportazione che definisce la pagina come parziale:

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>Mi hanno cliccato!</div>
```

Consulta la [documentazione htmx](https://htmx.org/docs/) per ulteriori dettagli sull'utilizzo di htmx.
